<template>
    <div id="senior">
      <div class="senior-wrap flex">
         <div class="left-wrap">
            <div class="left-inner flex">
               
               <div class="title-box">
                  <div class="title">运行控制</div>
                  <div class="left flex ">
                  <div class="item">
                     <div class="square darkyellow"><i class="iconfont icon-earth-full"></i><p>地理信息系统</p></div>
                     <div class="square green"><i class="iconfont icon-xitongbianma"></i><p>编码服务</p></div>
                     <div class="rectangle lightgreen"><i class="iconfont icon-dingwei"></i><p>设备设施坐标采集服务</p></div>
                  </div>
                  <div class="item">
                     <div class="rectangle orange"><i class="iconfont icon-shengwencaiji"></i><p>自助导览系统</p></div>
                     <div class="square purple"><i class="iconfont icon-nengxiaoguanli"></i><p>制冷机系统</p></div>
                     <div class="square rose"><i class="iconfont icon-tousuguanli"></i><p>投诉管理系统</p></div>
                  </div>
                  <div class="item">
                     <div class="square lightgreen"><i class="iconfont icon-dilan-shujucaiji1"></i><p>信息发布系统</p></div>
                     <div class="square lightgreen"><i class="iconfont icon-tingchechang"></i><p>故障管理系统</p></div>
                     <div class="rectangle darkyellow"><i class="iconfont icon-cccyunhujiaozhongxin"></i><p>呼叫中心管理</p></div>
                  </div>
               </div>
               </div>
               <div class="title-box">
                  <div class="title">能源分析</div>
                  <div class="right flex">
                  <div class="item">
                     <div class="rectangle purple"><i class="iconfont icon-zonghezhenduan"></i><p>能耗管理系统</p></div>
                     <div class="square darkyellow"><i class="iconfont icon-diannao"></i><p>信息发布系统</p></div>
                     <div class="square rose"><i class="iconfont icon-shouyetubiao2-18"></i><p>设备台账系统</p></div>
                     
                  </div>
                  <div class="item">
                     
                     <div class="square green"><i class="iconfont icon-jifang"></i><p>制冷机房官网</p></div>
                     <div class="square blue"><i class="iconfont icon-shebeiyuebaoshebeiribao"></i><p>制冷机检修</p></div>
                     <div class="rectangle lightgreen"><i class="iconfont icon-duoren"></i><p>设备管理微信公众号管理</p></div>
                  </div>
               </div>
               </div>
            </div>
            <div class="title-box">
               <div class="title">设备大数据</div>
               <div class="left-bottom flex">
                  <div class="item"><div class="bigrectangle orange"><i class="iconfont icon-dilan-shujucaiji1"></i><span>大数据采集</span></div></div>
                  <div class="item"><div class="bigrectangle blue"><i class="iconfont icon-shangwutubiao-"></i><span>大数据建模</span></div></div>
                  <div class="item"><div class="bigrectangle purple"><i class="iconfont icon-shangshengjiantou"></i><span>大数据分析展现</span></div></div>
            </div>
            </div>
         </div>
         <div class="right-box">
            <div class="title">智慧管理</div>
            <div class="top flex">
               <div class="item">
                  <div class="square darkyellow"><i class="iconfont icon-wenben"></i><p>排班管理</p></div>
                  <div class="rectangle purple"><i class="iconfont icon-wenben"></i><p>资源管理</p></div>
               </div>
               <div class="item">
                  <div class="square rose"><i class="iconfont icon-jinggao"></i><p>应急管理</p></div>
                  <div class="rectangle orange"><i class="iconfont icon-ico_shebeiguanli_shebeixinxiweihu"></i><p>运行分析</p></div>
               </div>
               <div class="item">
                  <div class="square blue"><i class="iconfont icon-zhaoshang"></i><p>招商管理</p></div>
                  <div class="rectangle lightgreen"><i class="iconfont icon-route1"></i><p>线路管理</p></div>
               </div>
            </div>
            <div class="middle flex">
               <div class="item">
                  <div class="morebigrectangle darkyellow"><i class="iconfont icon-shipin"></i><p>视频管理</p></div>
               </div>
               <div class="item">
                  <div class="rectangle lightgreen"><i class="iconfont icon-blood-full"></i><p>资源管理</p></div>
               </div>
            </div>
            <div class="bottom flex">
               <div class="item">
                  <div class="rectangle blue"><i class="iconfont icon-caijishebeixinxichaxun"></i><p>设备管理</p></div>
               </div>
               <div class="item">
                  <div class="rectangle purple"><i class="iconfont icon-shebeiyuebaoshebeiribao"></i><p>故障管理</p></div>
               </div>
               <div class="item">
                  <div class="rectangle orange"><i class="iconfont icon-jianxiuqingdian"></i><p>巡检管理</p></div>
               </div>
            </div>
         </div>
      </div>
    </div>
  </template>
  
  <script>
     export default({
      name:'Senior',
      data(){
          return {
          }
      },
     })
  </script>
  
  <style scoped lang="less" >
      #senior{
         width: 100%; background: url(@/assets/imgs/bg.jpg) no-repeat; height: 79.8vh; background-size: 100%
      }
      .left-bottom{
         background-color: rgba(0,0,0,0.6);
         padding: 0.1rem 0 0.1rem 0.1rem;
         border-radius: 0.1rem;
      }
      .title-box{
         margin-right: 0.5rem;
      }
      .title{
         font-size: 0.3rem;
         margin-bottom: 0.2rem;
      }
      .senior-wrap{
         // background-color: #ccc;
         width: 15rem;
         margin: 0 auto;
         color: #fff;
         padding-top: 0.2rem;
         display: flex;
         justify-content: space-around;
         
      }
      .square ,.rectangle,.bigrectangle,.morebigrectangle {
         border-radius: 0.1rem;
         margin-bottom: 0.1rem;
         i{
            font-size: 0.5rem;
         }
         
         p{
            margin-top: 0.15rem;
         }

      }
      .square {
			width: 1.56rem;
			height: 1.25rem;
         text-align: center;
         padding: 0.15rem 0.1rem;
			
		}
      .rectangle{
         width: 1.56rem;
         height:1.625rem;
         text-align: center;
         padding: 0.15rem 0.1rem 0 0.1rem;
         i{
            font-size: 0.7rem;
         }

      }
      .bigrectangle{
         width: 2.8rem;
         height:1.1rem;
         margin-bottom: 0;
         display: flex;
         align-items: center;
         justify-content: space-evenly;
      }
      .morebigrectangle{
         width: 3.2rem;
         height: 1.56rem;
         text-align: center;
         padding: 0.2rem 0.1rem;
      }
      .item{
         margin-right: 0.1rem;
      }
      .darkyellow{background-color: #e6ba01;}
      .green{background-color: #689f0e;}
      .lightgreen{background-color: #03be87}
      .orange{background-color: #ed6e07}
      .purple{background-color: #9b36e3}
      .rose{background-color: #ce045a;}
      .blue{background-color: #5292f4;}
  </style>